<!-- 评价页面 -->
<script setup>
import { reactive } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
// 数据
const data = reactive({
  bool: false,
  fileList: [],
  remark: ''
})
// 新增图片
const afterRead = async (event) => {
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
  let lists = [].concat(event.file);
  let fileListLen = data.fileList.length;
  lists.map((item) => {
    data.fileList.push({
      ...item,
      status: 'success',
      message: '',
    });
  });
  // lists.map((item) => {
  //   data.fileList.push({
  //     ...item,
  //     status: 'uploading',
  //     message: '上传中',
  //   });
  // });

  // for (let i = 0; i < lists.length; i++) {
  //   const result = await uploadFilePromise(lists[i].url);
  //   let item = data.fileList[fileListLen];
  //   data.fileList.splice(fileListLen, 1, {
  //     ...item,
  //     status: 'success',
  //     message: '',
  //     url: result,
  //   });
  //   fileListLen++;
  // }
};

// 上传图片
const uploadFilePromise = (url) => {
  return new Promise((resolve, reject) => {
    let a = uni.uploadFile({
      url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
      filePath: url,
      name: 'file',
      formData: {
        user: 'test',
      },
      success: (res) => {
        setTimeout(() => {
          resolve(res.data.data);
        }, 1000);
      },
    });
  });
};
// 删除图片
const deletePic = (event) => {
  data.fileList.splice(event.index, 1);
};

// 提交数据
const submit = () => {
  uni.showToast({
    title: '提交成功',
    icon: 'none'
  })
}
</script>

<template>
  <view class="evaluate-page">
    <!-- 订单信息 -->
    <view class="order-info">
      <view class="head">
        <text class="order-no">334374658690785764</text>
      </view>
      <!-- 商品列表 -->
      <view class="commodity--list">
        <view class="commodity-item" v-for="item in (1 == 1 && !data.bool ? 1 : 5)" :key="item">
          <view class="left">
            <view class="img-box">
              <image style="width: 100rpx; height:100rpx;" src="https://cdn.uviewui.com/uview/goods/1.jpg"
                mode="scaleToFill" />
            </view>
            <view class="info">
              <view class="name">商品名称</view>
              <view class="sku">规格：8瓶</view>
            </view>
          </view>
          <view class="right">
            <view class="price">¥200.00</view>
            <view class="num-box">
              <up-icon name="close" color="#000000" size="12"></up-icon>
              <text class="num">1</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 展示更多 -->
      <view v-if="10 > 1" class="showMore" @click="data.bool = !data.bool">
        <text>{{ !bool ? '展开' : '收起' }}</text>
        <up-icon :name="!data.bool ? 'arrow-down' : 'arrow-up'" color="#000" size="16"></up-icon>
      </view>
    </view>
    <!-- 上传图片 -->
    <up-upload :fileList="data.fileList" @delete="deletePic" @afterRead="afterRead" name="1" :previewFullImage="true"
      multiple :maxCount="3" uploadIcon="plus" uploadIconColor="#CCCCCC" width="188rpx" height="188rpx"></up-upload>
    <!-- 评价内容 -->
    <up-textarea v-model="data.remark" height="188rpx" border="none" placeholder="请留下您宝贵的建议" :count="true"
      maxlength="200"></up-textarea>
    <!-- 提交按钮 -->
    <view class="btn-box">
      <up-button class="sure-btn" text="确认" type="primary" shape="circle" @click="submit"></up-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.evaluate-page {
  box-sizing: border-box;
  padding: 50rpx 30rpx;
  min-height: 100vh;
  background: #F9F9F9;

  // 订单信息
  & .order-info {
    padding: 0 30rpx;
    background: #FFFFFF;
    border-radius: 10rpx;

    // 头部
    & .head {
      display: flex;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 2rpx solid #F9F9F9;

      & .order-no {
        font-weight: 400;
        font-size: 26rpx;
        color: #333333;
      }
    }

    // 商品列表
    & .commodity--list {

      & .commodity-item {
        margin-top: 24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        & .left {
          display: flex;

          & .img-box {
            width: 100rpx;
            height: 100rpx;
            border-radius: 10rpx;
            overflow: hidden;
          }

          & .info {
            margin-left: 20rpx;

            & .name {
              font-weight: 500;
              font-size: 28rpx;
              color: #333333;
            }

            & .sku {
              margin-top: 10rpx;
              font-weight: 400;
              font-size: 24rpx;
              color: #333333;
            }
          }
        }

        & .right {

          & .price {
            font-weight: 400;
            font-size: 28rpx;
            color: #333333;
          }

          & .num-box {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-top: 10rpx;
            line-height: 24rpx;

            &::v-deep .u-icon {
              margin-top: 5rpx;
            }

            & text {
              padding-left: 6rpx;
              font-weight: 400;
              font-size: 24rpx;
              color: #333333;
            }
          }
        }
      }
    }

    // 展开更多
    & .showMore {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 40rpx;
      padding-bottom: 30rpx;

      & text {
        font-weight: 400;
        font-size: 26rpx;
        color: #333333;
      }

      &::v-deep .u-icon {
        margin-left: 10rpx;
      }
    }
  }

  // 上传图片
  &::v-deep .u-upload {
    margin-top: 40rpx;

    & .u-upload__button {
      background-color: #fff;
    }
  }

  // 文本域
  &::v-deep .u-textarea {
    margin-top: 40rpx;
    padding: 30rpx;
  }

  // 按钮
  & .btn-box {
    margin-top: 280rpx;
    padding: 0 30rpx;

    &::v-deep .u-button {
      height: 88rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #FFFFFF;
      background: #FFA618;
      border-radius: 112rpx;
      border: none;
    }
  }
}
</style>